<template>
  <div>
    <Modal v-model="type_modal" :title="type_title" @on-cancel="cancel">
      <Form :model="formItem" :label-width="100">
        <Row :gutter="24">
          <Col span="22">
            <FormItem label="设备类型:">
              <Select v-model="formItem.type" @on-change="change_tpye" :disabled="typeData && typeData.type ? true : false">
                <Option v-for="item in type_listData" :value="item.type" :key="item.type">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="图元样式:">
              <Select v-model="formItem.style" @on-change="change_style" :disabled="typeData && typeData.type ? false : true">
                <Option v-for="item in type_listData" :value="item.style" :key="item.style">{{ item.styleName }}</Option>
              </Select>
            </FormItem>
            <FormItem label="类型名称:">
              <Input v-model="formItem.name" placeholder="请输入设备类型名称" :disabled="typeData && typeData.type ? true : false"></Input>
            </FormItem>
            <FormItem label="名称是否显示:">
              <RadioGroup v-model="formItem.isVisibleName">
                <Radio label="1">是</Radio>
                <Radio label="0">否</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <!-- 保存--取消按钮 -->
      <div slot="footer">
        <Row :gutter="24" type="flex" justify="end">
          <Col span="5">
            <Button type="primary" size="large" long @click="submit">应用</Button>
          </Col>
          <Col span="5">
            <Button size="large" long @click="cancel">取消</Button>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>
// 设备类型接口返回的所有数据
import deviceTypeData from './resources/deviceTypeData.json'
export default {
  props: ['typeData'],
  data() {
    return {
      type_title: '添加设备类型',
      type_modal: false,
      type_listData: [],
      formItem: {
        type: "",
        name: "",
        style: "",
        styleName: "",
        isVisibleName: '1' // 1-默认显示 0-不显示
      }
    }
  },
  methods: {
    //改变类型
    change_tpye(typeId){
      console.log("typeId:", typeId)
      if (typeId) {
        this.type_listData.map(v=>{
          if( typeId === v.type){
            this.formItem.name = v.name; //双向数据绑定给名称赋值
          }
        })
      }
    },
    //改变style
    change_style(){

    },
    //提交
    submit() {
      console.log("this.formItem:", this.formItem);
      this.$emit('submit', this.formItem);
      this.type_modal = false; // 关闭弹层
    },
    //取消
    cancel() {
      this.type_modal = false; //关闭弹层
      // this.$Message.info("Clicked cancel");
    },
  },
  //监听当前弹层状态
  watch:{
    type_modal:function(data){
      if (data && this.typeData){
        console.log("回显的数据:",this.typeData)
        this.formItem = {
          type: String(this.typeData.type),
          name: this.typeData.name,
          style: this.typeData.style,
          styleName: "",
          isVisibleName: String(this.typeData.isVisibleName) || '1'
        }
        this.type_title =  this.typeData.type ? '修改设备类型' : '添加设备类型'
      }
    }
  },
  created() {},
  mounted() {

    //给设备类型数组赋值
    deviceTypeData.map(v=>{
      this.type_listData.push({ type: v.type.toString(), name: v.name, style: v.style, styleName: v.styleName})
    })
    // this.formItem.type = this.type_listData[0].type;
    // this.formItem.name = this.type_listData[0].name;
    // this.formItem.style ='';
    // this.formItem.styleName =''; 
  },
};
</script>